<!DOCTYPE html>
<html>
	<!--登陆-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			#app{
				width: 100%;
				height: 100%;
				padding: 0;
				background: url(skin/img/invi-bg.png) no-repeat center center;
				background-size: cover;
			}
			#hea{
				display: flex;
				height: 50px;
				padding:10px;
 
			}
			#hea>div{
				display: flex;
				align-items: flex-end;
			}
			#hea>div:nth-of-type(2){
				justify-content: center;
				font-size:18px;
				color: white;
			}
			.acti-btn{
				position: absolute;
				top:60vh;
				right: 11vw;
				width: 60px;
				height: 60px;
			}
			#op-wrap{
				position: absolute;
				bottom: 8vh;
				width: 100%;
				height: 150px;
				/*background: red;*/
			}
			#op-wrap>p:nth-of-type(1){
				font-size:13px;
				color: rgba(255,255,255,.6);
				text-align: center;
			}
			#op-wrap>p:nth-of-type(2){
				padding:10px 0;
				font-size:13px;
				text-align: center;
				color: RGBA(251, 203, 0, .7);
			}
			#op-wrap>p:nth-of-type(3){
				display: flex;
				justify-content: center;
			}
			
			#mask,#mask-par{
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				z-index: 1;
			}
			#mask{
				background: rgba(0,0,0,.5);
			}
			#mask-par{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#mask-par>.ma-con{
				position: relative;
				width: 60%;
				padding:15px 10px 35px;
				background: white;
				border-radius: 10px;
			}
			#mask-par>.ma-con>h1{
				padding-bottom:15px;
				font-size: 16px;
				text-align:center;
				opacity: .6;
			}
			#mask-par>.ma-con>p{
				font-size: 14px;
				line-height: 25px;
				opacity: .6;
			}
			#mask-par>.ma-con>button{
				position: absolute;
				width: 80%;
				height: 35px;
				bottom: -18px;
				left:10%;
				background: #3573FA;
				border: none;
				outline: none;
				color: white;
				border-radius: 20px;
			}
			
			#mask-par>.mask-shar{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 140px;
				background: white;
			}
			#mask-par>.mask-shar>h3{
				padding: 15px;
				font-size:15px;
				text-align: center;
				opacity: .6;
			}
			#mask-par>.mask-shar>.shar-change{
				display: flex;
			}
			#mask-par>.mask-shar p{
				flex: 1 1 0;
			}
			#mask-par>.mask-shar .wei-share,
			#mask-par>.mask-shar .py-share{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
			#mask-par>.mask-shar .py-share{
				align-items: flex-end;
			}
			.animated{
				animation-duration: .4s;
				animation-fill-mode:both;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<!--共工遮罩层-->
			<div id="mask" v-if='maskRule||maskShare'></div>
			<!--共工遮罩层-->
				
			<!--活动规则-->
			<transition
				enter-active-class='animated zoomIn'	
				leave-active-class='animated zoomOut'
			>
				<div id="mask-par" v-if='maskRule' @click='maskRule=false'>
					<div class='ma-con'>
						<h1>活动规则</h1>
						<p>你不知道的是，每过一秒钟你就苍老了一秒</br>研究表明，美国的小学生的英语都比中国大学生的英语要好</br>有关部门表示，以前死去的人都喝过水</p>
						<button>我知道了</button>
					</div>
				</div>
			</transition>
			<!--活动规则-->
			
			<!--分享遮罩层-->
			<transition
				enter-active-class='animated bounceInUp'	
				leave-active-class='animated bounceOutDown'
			>
				<div id="mask-par" v-if='maskShare' @click='maskShare=false'>
					<div class="mask-shar">
						<h3>分享到</h3>
						<div class='shar-change'>
							<p></p>
							<p class='wei-share'>
								<img src="skin/img/wx.png" width="38px" height="30px"/>
								<br/><span>微信</span>
							</p>
							<p></p>
							<p class='py-share'> 
								<img src="skin/img/py.png" width="35px" height="35px"/>
								<br/><span>朋友圈</span>
							</p>
							<p></p>
						</div>
					</div>
				</div>
			</transition>
			<!--分享遮罩层-->
			
			<div id="hea">
				<div style='flex:1 1 0'>
					<img @click='back' src="skin/img/icon-back.png" height="22px" height="22px"/>
				</div>
				<div style='flex:2 1 0'>
					邀请好友
				</div>
				<div style="flex:1 1 0"></div>
			</div>
			<div class="acti-btn" @click='maskRule=true'>
				<img src="skin/img/acti-rule.png" width="100%" height="100%"/>
			</div>
			<div id="op-wrap">
				<p>每天每人仅发3次红包</p>
				<p>您的邀请码（3564sda412）</p>
				<p @click='maskShare=true'>
					<img src="skin/img/share-btn.png" width="250px" height="60px"/>
				</p>
			</div>
		</div>
		<script src="skin/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					maskRule:false,//活动规则遮罩层控制
					maskShare:false,//分享遮罩层控制
				},
				methods:{
					//自制返回操作
					back:function(){
						plus.webview.open('home.html','home')
					},
					
					//下一步（规则中的我知道了）
					next:function(){
						
					}
				}
			});
		</script>
	</body>
</html>


